<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0
        }
    </style>
    <script type="importmap">
        {
            "imports":{
                "three":"./node_modules/three/build/three.module.js",
                "three/addons/":"./node_modules/three/examples/jsm/"
            }
        }
    </script>
    <script type="module">
        import * as THREE from 'three';
        import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
        import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
        const width=window.innerWidth
        const height=window.innerHeight;
        // 创建场景
        const scene=new THREE.Scene();

        // 创建相机
        const camera=new THREE.PerspectiveCamera(90,width/height,0.1,1000);
        // 设置相机的位置
        camera.position.set(25,10,0);
        // 设置相机的观察点
        // camera.lookAt(0,0,0);
        
        // 创建环境光
        const ambientlight=new THREE.AmbientLight(0xffffff,1);
        // 将环境光添加到场景中
        scene.add(ambientlight);

        // 创建网络
        const grid=new THREE.GridHelper(500,200);
        // 将网格添加到场景中
        scene.add(grid);

        // 创建一个加载器
        const loader=new GLTFLoader();
        // 创建一个group
        const group=new THREE.Group();
        // 创建渲染器
        const renderer=new THREE.WebGLRenderer({
            // 抗锯齿效果
            antialias: true,
            alpha:false
        });
        // 设置渲染尺寸
        renderer.setSize(width,height);


        // 开始加载gltf
        loader.load('./gltf/building.gltf',gltf=>{
            // 将外部模型添加到分组中
            group.add(gltf.scene);
            // 将分组添加到场景中
            scene.add(group);
            // 执行一次渲染
            renderer.render(scene,camera);
        });

    
        // 创建轨道控制器
        const controls=new OrbitControls(camera,renderer.domElement);
        controls.target.set(0,0,0); // 与camera.lookAt()参数保持一致即可
        // 轨道控制器的属性发生变化, 都要执行update更新方法
        controls.update(); 

        // 将渲染结果挂载到页面中
        document.body.appendChild(renderer.domElement);

        animate();
        // 动画函数
        function animate(){
            // 重新执行渲染
            renderer.render(scene,camera);
            requestAnimationFrame(animate);
        }

        window.addEventListener('resize',()=>{
            // 设置相机的aspect宽高比
            camera.aspect=window.innerWidth/window.innerHeight;
            // 只要相机的属性发生了变化都的调用更新方法, 重新生成投影矩阵
            camera.updateProjectionMatrix();
            // 重新设置绘制尺寸
            renderer.setSize(window.innerWidth,window.innerHeight);
            // 更新画布像素比:物理像素和逻辑像素比
            renderer.setPixelRatio(window.devicePixelRatio);
        });
    </script>
</head>

<body>

</body>

</html>